<template>
  <BeEcharts ref="bottomLineChartRef" class="chart-box" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { BeEcharts, useEcharts } from '@/components/basics/BeEcharts'
import * as echarts from 'echarts/core'

// state
const bottomLineChartRef = ref()
const { renderEcharts } = useEcharts(bottomLineChartRef)
const props = defineProps({
  chartData: {
    type: Array,
    default: () => []
  }
})
onMounted(() => {
  renderEcharts({
    backgroundColor: '#001E3E', // 深蓝背景
    title: {
      text: '告警趋势图',
      textStyle: {
        color: '#fff',
        fontSize: 16
      },
      left: 'left'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['高危', '中危', '低危'],
      bottom: 10,
      textStyle: {
        color: '#fff'
      },
      icon: 'circle'
    },
    grid: {
      left: '3%',
      right: '8%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.chartData.map((item: any) => item.date),
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      max: 1000,
      splitLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '高危',
        type: 'line',
        smooth: true,
        data: props.chartData.map((item: any) => item.urgentCount),
        itemStyle: {
          color: '#FF7CA8'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,124,168,0.4)' },
            { offset: 1, color: 'rgba(255,124,168,0)' }
          ])
        }
      },
      {
        name: '中危',
        type: 'line',
        smooth: true,
        data: props.chartData.map((item: any) => item.seriousCount),
        itemStyle: {
          color: '#FFD700'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,215,0,0.4)' },
            { offset: 1, color: 'rgba(255,215,0,0)' }
          ])
        }
      },
      {
        name: '低危',
        type: 'line',
        smooth: true,
        data: props.chartData.map((item: any) => item.generalCount),
        itemStyle: {
          color: '#69B3FF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(105,179,255,0.4)' },
            { offset: 1, color: 'rgba(105,179,255,0)' }
          ])
        }
      }
    ]
  })
})
</script>
